<template>
  <div>
    <nav-header></nav-header>
    <nav-bread>
      <span>Address</span>
    </nav-bread>
    <div class="checkout-page">
      <div class="container">
        <div class="checkout-addr">
          <div class="page-title-normal">
            <h2 class="page-title-h2"><span>check out</span></h2>
          </div>
          <!-- process step -->
          <div class="check-step">
            <ul>
              <li class="cur"><span>Confirm</span> address</li>
              <li><span>View your</span> order</li>
              <li><span>Make</span> payment</li>
              <li><span>Order</span> confirmation</li>
            </ul>
          </div>

          <!-- address list -->
          <div class="page-title-normal checkout-title">
            <h2><span>Shipping address</span></h2>
          </div>
          <div class="addr-list-wrap">
            <div class="addr-list">
              <ul>
                <li v-for="item in displayedAddressList" :key="item.addressId"
                  :class="{'check': checkedAddressId === item.addressId}"
                  @click="checkedAddressId = item.addressId">
                  <dl>
                    <dt>{{ item.userName }}</dt>
                    <dd class="address">{{ item.streetName }}</dd>
                    <dd class="tel">{{ item.tel }}</dd>
                  </dl>
                  <div class="addr-opration addr-del">
                    <a href="javascript:;" class="addr-del-btn" @click="removeAddressConfirm(item.addressId)">
                      <svg class="icon icon-del"><use xlink:href="#icon-del"></use></svg>
                    </a>
                  </div>
                  <div class="addr-opration addr-default" v-if="item.isDefault">Default address</div>
                  <div class="addr-opration addr-set-default" v-else>
                    <a href="javascript:;" class="addr-set-default-btn" @click="setDefaultAddress(item.addressId)">
                      <i>Set default</i>
                    </a>
                  </div>
                </li>
                <li class="addr-new">
                  <div class="add-new-inner">
                    <i class="icon-add">
                      <svg class="icon icon-add"><use xlink:href="#icon-add"></use></svg>
                    </i>
                    <p>Add new address</p>
                  </div>
                </li>
              </ul>
            </div>

            <div class="shipping-addr-more">
              <a class="addr-more-btn up-down-btn" href="javascript:;"
                @click="expandAddressList" :class="{'open': displayedLimit === this.addressList.length}">
                <span v-if="displayedLimit !== this.addressList.length">showMore</span>
                <span v-else>hide</span>
                <i class="i-up-down">
                  <i class="i-up-down-l"></i>
                  <i class="i-up-down-r"></i>
                </i>
              </a>
            </div>
          </div>

          <!-- shipping method-->
          <div class="page-title-normal checkout-title">
            <h2><span>Shipping method</span></h2>
          </div>
          <div class="shipping-method-wrap">
            <div class="shipping-method">
              <ul>
                <li class="check">
                  <div class="name">Standard shipping</div>
                  <div class="price">Free</div>
                  <div class="shipping-tips">
                    <p>Once shipped，Order should arrive in the destination in 1-7 business days</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="next-btn-wrap">
            <router-link class="btn btn--m btn--red"
              :to="{ name: 'orderConfirm', params: { addressId: checkedAddressId || defaultAddressId }}">
              <!-- 这里的业务逻辑：如果用户当前订单手动选择了收货地址则使用该被选地址，否则使用默认地址 -->
              Next
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <nav-footer></nav-footer>
    <modal :showModal="showRemoveModal" @close="showRemoveModal = false">
      <p slot="message">确认删除该地址吗？</p>
      <div slot="btnGroup">
        <button class="btn btn--m" @click="removeAddress">确定</button>
        <button class="btn btn--m" @click="showRemoveModal = false">取消</button>
      </div>
    </modal>
  </div>
</template>

<script>
import '@/assets/css/checkout.css'
import NavHeader from '@/components/NavHeader'
import NavFooter from '@/components/NavFooter'
import NavBread from '@/components/NavBread'
import Modal from '@/components/Modal'
import axios from 'axios'
export default {
  name: 'Address',
  components: {
    NavHeader,
    NavBread,
    NavFooter,
    Modal
  },
  data () {
    return {
      showRemoveModal: false, // 控制显示删除地址模态框
      addressList: [], // 用户收获地址列表
      displayedLimit: 3, // 限制展示的地址信息数量
      toBeRemovedAddressId: '', // 待删除的地址 id
      defaultAddressId: '', // 用户设置的默认地址 id
      checkedAddressId: '' // 用户当前选中的地址 id
    }
  },
  computed: {
    displayedAddressList () {
      return this.addressList.slice(0, this.displayedLimit)
    }
  },
  methods: {
    getAddressList () {
      axios.get('/users/address/list')
        .then(res => {
          if (res.status === 200) {
            const data = res.data
            this.addressList = data.result
            // 默认选中用户设置的默认地址为收货地址
            this.defaultAddressId = this.addressList.find(item => item.isDefault).addressId
            this.checkedAddressId = this.defaultAddressId
          }
        })
    },
    expandAddressList () {
      this.displayedLimit = this.displayedLimit === 3
        ? this.addressList.length
        : 3
    },
    setDefaultAddress (addressId) {
      // 数据库操作
      axios.post('/users/address/setDefault', { addressId })
        .then(res => {
          if (res.status === 200) {
            const data = res.data
            if (data.status === '0') {
              // 数据库操作成功后，在前端实现效果
              this.addressList.forEach(item => {
                if (item.addressId === addressId) {
                  item.isDefault = true
                  this.defaultAddressId = item.addressId
                } else {
                  item.isDefault = false
                }
              })
            }
          }
        })
    },
    removeAddressConfirm (addressId) {
      console.log(`removeAddressConfirm`)
      this.toBeRemovedAddressId = addressId
      this.showRemoveModal = true
    },
    removeAddress () {
      console.log(`removeAddress`)
      // todo
      // 数据库操作
      const addressId = this.toBeRemovedAddressId
      axios.post('/users/address/remove', { addressId })
        .then(res => {
          if (res.status === 200) {
            const data = res.data
            if (data.status === '0') {
              // 数据库操作成功，再在前端展现出来
              this.showRemoveModal = false
              this.addressList = this.addressList.filter(item => item.addressId !== addressId)
            }
          }
        })
    }
  },
  mounted () {
    this.getAddressList()
    // 设置默认选中的用户收货地址为第一个或者默认收货地址
  }
}
</script>
